<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>防灾科技学院GIS协会</title>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=TP1I4bsoxvKXUYnugSn4PoK3"></script>
    <script src="http://localhost/GISC/public/static/javascript/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/three.js/86/three.js" data-ke-src="https://cdn.bootcss.com/three.js/86/three.js"></script>
    <script src="http://localhost/GISC/public/static/javascript/DDSLoader.js"></script>
    <script src="http://localhost/GISC/public/static/javascript/OBJLoader.js"></script>
    <script src="http://localhost/GISC/public/static/javascript/postprocessing.js"></script>
    <link rel="stylesheet" href="http://localhost/GISC/public/static/css/index.css">
    <style>
        #glContainer {
            position: fixed;
            z-index: -1;
            margin: 0px;
            padding: 0px;
        }

        body {
            margin: 0;
            background-color: white;
        }

        body,
        html,
        #allmap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }

        /* 弹窗 (background) */

        .modal {
            display: none;
            /* 默认隐藏 */
            position: fixed;
            z-index: 1;
            padding-top: 100px;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgb(0, 0, 0);
            background-color: rgba(0, 0, 0, 0.4);
        }

        /* 弹窗内容 */

        .modal-content {
            position: relative;
            background-color: #fefefe;
            margin: auto;
            padding: 0;
            border: 2px solid #ffffff;
            color: #000;
            width: 30%;

            -webkit-animation-name: animatetop;
            -webkit-animation-duration: 0.4s;
            animation-name: animatetop;
            animation-duration: 0.4s;
            border-radius: 5px;
        }

        /* 添加动画 */

        @-webkit-keyframes animatetop {
            from {
                top: -300px;
                opacity: 0
            }
            to {
                top: 0;
                opacity: 1
            }
        }

        @keyframes animatetop {
            from {
                top: -300px;
                opacity: 0
            }
            to {
                top: 0;
                opacity: 1
            }
        }

        .modal-header {
            padding: 2px 16px;
            color: #000;
            border-bottom: 1px solid;
        }

        .modal-body {
            background-color: #dedede;
            padding: 2px 16px;
            color: #000;
            display: -webkit-flex;
            display: flex;
            -webkit-justify-content: space-around;
            justify-content: space-around;

        }

        .modal-footer {
            border-top:1px solid;
            padding: 2px 16px;
            text-align: center;
            color: #000;
        }

        .btn {
            width: 200px;
            height: 30px;
            /* border-radius: 5px; */
            outline: none;
            border: blue;
            border-radius: 10px;
            background-color: #028dff;
            text-emphasis: none;
        }

        /* #join1 {
            border: 1px solid #00FFFF;
            border-radius: 50px;
            width: 50px;
            height: 50px;
            background-color: #33CCFF;
            text-align: center;
            color: #ffffff;
            display: -webkit-flex;
            display: flex;
            margin-top: 10px;
        }
        .join_1{
            margin: auto;
        }
        .join1{
            border: 1px solid #00FFFF;
            border-radius: 50px;
            width: 50px;
            height: 50px;
            background-color: #33CCFF;
            text-align: center;
            color: #ffffff;
            display: -webkit-flex;
            display: flex;
            margin-top: 40px;
        } */
    </style>
</head>

<body>

    <div id="allmap" style="display: none;"></div>
    <div id="glContainer"></div>
    <div id="daohang1">
        <ul class="head">
            <li class="nav2">防灾科技学院GIS协会
                <li class="nav1">
                    <a href="#about" id="join" onclick="joinUs()">申请加入</a>
                </li>
                <li class="nav1">
                    <a href="#contact" onclick="fans()">联系</a>
                </li>
                <li class="nav1">
                    <a href="#news">新闻</a>
                </li>
                <li class="nav1">
                    <a href="http://localhost/GISC/public/">主页</a>
                </li>
        </ul>
    </div>
    <div class="menu" id="daohang">
        <div class="menu-iteam">
<<<<<<< HEAD
            <a  class="menu-iteam-1"   href="http://localhost/GISC/public/index/goodproject/goodproject">优秀项目</a>
            <a  class="menu-iteam-2"   href="http://localhost/GISC/public/index/Book/book/">图书资源</a >
            <a  class="menu-iteam-3"   href="http://localhost/GISC/public/index/Members/member">会员名册</a >
            <a  class="menu-iteam-4"   href="http://localhost/GISC/public/index/Project/project">作品展示</a >
            <a  class="menu-iteam-5"   href="http://localhost/GISC/public/index/Free/index">时间轴</a >
            <div   class="effect"></div>
=======
            <a class="menu-iteam-1" href="http://localhost/GISC/public/index/goodproject/goodproject">优秀项目</a>
            <a class="menu-iteam-2" href="http://localhost/GISC/public/index/Association/assocition">协会介绍</a>
            <a class="menu-iteam-3" href="#">指导老师</a>
            <a class="menu-iteam-4" href="http://localhost/GISC/public/index/Project/project">作品展示</a>
            <a class="menu-iteam-5" href="http://localhost/GISC/public/index/Free/index">时间轴</a>
            <div class="effect"></div>
        </div>
        <div id="myModal1" class="modal">

            <!-- 弹窗内容1 -->

            <div class="modal-content">
                <div class="modal-header">
                    <h2>申请加入</h2>
                </div>
                <div class="modal-body">
                    <form action="/GISC/public/index/index/upInfo">
                        <input type="checkbox" name="vehicle" value="Bike">我已阅读并同意 <a href="" onclick="">《用户注册协议》</a> 
                    </form>
                </div>
                <div class="modal-footer">
                    <button class="btn" onclick="btChange()" id="bt1">马上申请</button>
                </div>
            </div>
            </div>
            <div id="myModal2" class="modal">
                    <div class="modal-content">
                            <div class="modal-header">
                                <h2>用户注册协议</h2>
                            </div>
                            <div class="modal-body">
                                
                            </div>
                            <div class="modal-footer">
                                <button class="btn" onclick="btChange()" id="bt1">马上申请</button>
                            </div>
                        </div>
        </div>
        <div class="splash" id="ButtonC">

            <p class="splash_workmark">GIS协会</p>
            <div class="delata"></div>
            <p calss="splash_scroller">
                <a id="splash_choco" href="http://localhost/GISC/public/index/Indexone/index">
                    认识 GIS协会</a>
            </p>
>>>>>>> 545a4d9575ae3fccddd14355877c4153852cc8f9
        </div>

        <SCRIPT> 
            
            // 获取弹窗 
            var modal1 = document.getElementById('myModal1');

            // 打开弹窗的按钮对象 
            var btn = document.getElementById("myBtn");
            // 点击按钮打开弹窗 
            function joinUs() {
                modal1.style.display = "block";
                joinP();
            }
            

            // 在用户点击其他地方时，关闭弹窗 
            window.onclick = function (event) {
                if (event.target == modal1) {
                    modal1.style.display = "none";
                }
            }
        </SCRIPT>



        <!-- WebGL shaders -->
        <script id="simpleVertex" type="x-shader/x-vertex">
  varying vec2 vUv;
  varying vec3 v_Normal;
  varying vec3 v_Position;

  void main() {
    vUv = uv;

    vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
    gl_Position = projectionMatrix * mvPosition;

    v_Normal = normalize(normalMatrix * normal);
    v_Position = vec3(mvPosition.xyz);
  }
</script>
        <script id="horizontalBlurFrag" type="x-shader/x-fragment">
    uniform sampler2D tDiffuse;
    uniform float h;

    varying vec2 vUv;

    void main() {
        vec4 sum = vec4( 0.0 );

        vec4 originalSample = texture2D( tDiffuse, vUv );

        sum += texture2D( tDiffuse, vec2( vUv.x - 3.2307 * h, vUv.y ) ) * 0.0702;
        sum += texture2D( tDiffuse, vec2( vUv.x - 1.3846 * h, vUv.y ) ) * 0.3162;
        sum += originalSample * 0.2270270270;
        sum += texture2D( tDiffuse, vec2( vUv.x + 1.3846 * h, vUv.y ) ) * 0.3162;
        sum += texture2D( tDiffuse, vec2( vUv.x + 3.2307 * h, vUv.y ) ) * 0.0702;

        gl_FragColor = sum;
    }
</script>

        <script id="verticalBlurFrag" type="x-shader/x-fragment">
    uniform sampler2D tDiffuse;
    uniform float v;

    varying vec2 vUv;

    void main() {
        vec4 sum = vec4( 0.0 );

        vec4 originalSample = texture2D( tDiffuse, vUv );

        sum += texture2D( tDiffuse, vec2( vUv.x, vUv.y - 3.2307 * v ) ) * 0.0702;
        sum += texture2D( tDiffuse, vec2( vUv.x, vUv.y - 1.3846 * v ) ) * 0.3162;
        sum += originalSample * 0.2270270270;
        sum += texture2D( tDiffuse, vec2( vUv.x, vUv.y + 1.3846 * v ) ) * 0.3162;
        sum += texture2D( tDiffuse, vec2( vUv.x, vUv.y + 3.2307 * v ) ) * 0.0702;

        gl_FragColor = sum;
    }
</script>

        <script id="overlayFrag" type="x-shader/x-fragment">
    uniform sampler2D tDiffuse;
    uniform sampler2D tOverlay;

    varying vec2 vUv;

    void main() {
        vec4 regularScene = texture2D( tDiffuse, vUv );
        vec4 overlay = texture2D( tOverlay, vUv );

        float blurOpacity = 0.5;

        overlay.a *= blurOpacity;
        gl_FragColor = vec4(regularScene.rgb * (1.0 - overlay.a) +  overlay.rgb * overlay.a, 1.0);
    }
</script>

        <script id="earthFrag" type="x-shader/x-fragment">
    uniform sampler2D tEarth;
    uniform sampler2D tClouds;
    uniform float fTime;

    varying vec2 vUv;
    varying vec3 v_Normal;
    varying vec3 v_Position;

    void main() {
        vec4 earth = texture2D(tEarth, vec2(vUv.x + fTime * 0.5, vUv.y));
        vec4 clouds = texture2D(tClouds, vec2(vUv.x + fTime, vUv.y));

        vec4 diffuse = earth + clouds;

        vec3 v_LightPos = vec3(-200.0, 200.0, -200.0);
        vec3 light_vec = normalize(v_LightPos - v_Position);

        float lightStrength = max(dot(v_Normal, light_vec), 0.05);

        gl_FragColor = diffuse * lightStrength;
    }
</script>

        <script>
            $(document).ready(function () {
                Initialize();

                // Instantiate a texture loader.
                var loader = new THREE.TextureLoader();

                // Allow CORS for loading images from Amazon S3.
                loader.crossOrigin = '';

                // load a resource
                loader.load('http://localhost/GISC/public/static/image/earth_clouds_low_4096.jpg',
                    // Function when resource is loaded
                    function (cloudTexture) {
                        loader.load('http://localhost/GISC/public/static/image/earth_color_low_4096.jpg',
                            function (earthTexture) {
                                PopulateScenes(earthTexture, cloudTexture);
                                SetupComposers();

                                animate();
                            });
                    });
            });

            // Adjust the WebGL content when the browser window is resized.
            $(window).resize(function () {
                var width = window.innerWidth;
                var height = window.innerHeight;

                camera.aspect = width / height;
                camera.updateProjectionMatrix();
                renderer.setSize(width, height);

                sceneComposer.setSize(width, height);
                blurComposer.setSize(width / 2, height / 2);
            });

            // Scene-related variables that will be needed throughout various functions.
            var camera = null;
            var renderer = null;
            var scene = null;
            var controls = null;
            var blurScene = null;
            var blurMaskScene = null;

            var blurComposer = null;
            var sceneComposer = null;

            var earthMaterial = null;
            var earthGlow = null;

            var startTime = new Date().getTime();

            // Initialize the scene camera, renderer and composers.
            var Initialize = function () {
                camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 1, 2000);
                camera.position.z = 400;
                camera.position.y = -80;
                camera.position.x = 100;

                renderer = new THREE.WebGLRenderer({
                    alpha: true,
                    logarithmicDepthBuffer: true
                    , antialias: true

                });
                renderer.setClearColor(0xFFFFFF, 0.0);
                renderer.setPixelRatio(window.devicePixelRatio);
                renderer.setSize(window.innerWidth, window.innerHeight);
                renderer.autoClear = false;
                renderer.setClearAlpha(0);
                $('#glContainer').append(renderer.domElement);


                /*
                controls = new THREE.OrbitControls( camera, renderer.domElement );
                controls.enableDamping = true;
                controls.dampingFactor = 0.25;
                controls.enableZoom = true;
                */

                scene = new THREE.Scene();
                blurScene = new THREE.Scene();
                blurMaskScene = new THREE.Scene();

                var renderTargetParameters = {
                    minFilter: THREE.LinearFilter,
                    magFilter: THREE.LinearFilter,
                    format: THREE.RGBAFormat,
                    stencilBufer: true
                };
                var blurRenderTarget = new THREE.WebGLRenderTarget(window.innerWidth, window.innerHeight, renderTargetParameters);

                blurComposer = new THREE.EffectComposer(renderer, blurRenderTarget);
                sceneComposer = new THREE.EffectComposer(renderer);
            }

            // Set up the main scene, blur scene, and blur mask.
            var PopulateScenes = function (earthTexture, cloudTexture) {
                earthMaterial = CreateEarthMaterial(earthTexture, cloudTexture);

                var earthPos = new THREE.Vector3(40, -100, 0);
                var sunPos = new THREE.Vector3(20, -5, 0);

                // This cube will be the source from which the glow emanates.
                var earth = CreateEarth({
                    size: 50,
                    color: 0xFFFFFF,
                    material: earthMaterial,
                    position: earthPos
                });

                var sun = CreateSun({
                    size: 10,
                    color: 0xFFFFFF,
                    opacity: 0.5,
                    position: sunPos
                });

                // This cube effectively creates a mask in the blur scene. It mirrors the position of the opaque cube.
                // If you examine the 'CreateCube' method, you'll see that we are creating a material with an opacity of 0, but a disabled transparent flag.
                // This material is equivalent to the following fragment shader: "gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);"
                var earthObstruction = CreateEarth({
                    size: 49,
                    color: 0xFFFFFF,
                    opacity: 0.0,
                    position: earthPos
                });

                earthObstruction.renderOrder = 1;

                // This is the cube that represents the actual glow of the first cube we created.
                // Notice its size is slightly bigger than the source cube. The size can be adjusted creating a smaller/larger glow.
                earthGlow = CreateEarth({
                    size: 51.5,
                    opacity: 0.7,
                    color: 0x397ebe,
                    position: earthPos
                });

                var sunGlow = CreateSun({
                    size: 12,
                    color: 0xFFFFFF,
                    position: sunPos
                });

                // This cube represents the area of the scene that needs to be blurred.
                // This object will be used
                var glowCubeMask = CreateEarth({
                    size: 65,
                    color: 0xFFFFFF,
                    position: earthPos
                });

                // Set up a point light in the main scene.
                var light = new THREE.PointLight(0xff0000, 1, 1000);
                light.position.set(50, 50, 50);

                // Mirror the same light in the blur scene.
                var blurLight = new THREE.PointLight(0xff0000, 1, 1000);
                blurLight.position.set(50, 50, 50);

                scene.add(earth);
                //scene.add(sun);
                scene.add(new THREE.AmbientLight(0xFFFFFF));

                blurScene.add(new THREE.AmbientLight(0xFFFFFF));
                blurScene.add(earthGlow);
                blurScene.add(earthObstruction);
                //blurScene.add(sunGlow);

                blurMaskScene.add(glowCubeMask);
            }

            var CreateEarthMaterial = function (earthMap, cloudMap) {
                cloudMap.wrapS = cloudMap.wrapT = THREE.RepeatWrapping;
                earthMap.wrapS = earthMap.wrapT = THREE.RepeatWrapping;

                return new THREE.ShaderMaterial({
                    uniforms: {
                        tEarth: {
                            value: earthMap
                        },
                        tClouds: {
                            value: cloudMap
                        },
                        fTime: {
                            value: 0.0
                        }
                    },
                    vertexShader: $('#simpleVertex').html(),
                    fragmentShader: $('#earthFrag').html()
                });
            }

            // Helper function that will create a cube and cube material based on the function parameters.
            // Possible parameters: color, size, opacity, position
            var CreateEarth = function (params) {
                var earthGeometry = new THREE.SphereGeometry(params.size, 50, 50);

                var material = params.material != undefined ? params.material : new THREE.MeshLambertMaterial({
                    color: params.color,
                    opacity: params.opacity != undefined ? params.opacity : 1.0,
                    transparent: false,
                    depthWrite: false,
                    shading: THREE.SmoothShading
                });

                var earth = new THREE.Mesh(earthGeometry, material);

                if (params.position != undefined)
                    earth.position.copy(params.position);

                return earth;
            }

            var CreateSun = function (params) {
                var earthGeometry = new THREE.IcosahedronGeometry(params.size, 4);

                var material = params.material != undefined ? params.material : new THREE.MeshLambertMaterial({
                    color: params.color,
                    opacity: params.opacity != undefined ? params.opacity : 1.0,
                    transparent: false,
                    depthWrite: false,
                    shading: THREE.SmoothShading
                });

                var earth = new THREE.Mesh(earthGeometry, material);

                if (params.position != undefined)
                    earth.position.copy(params.position);

                return earth;
            }

            // Set up THREE.Composer objects to render / blur the scenes.
            var SetupComposers = function () {
                // Create a couple blur passes to blur the regular scene output. Note that each one of these objects will have a horizontal blur pass and a vertical blur pass.
                var blur1Passes = CreateBlurShaderPasses(window.innerWidth, window.innerHeight, 8);
                var blur2Passes = CreateBlurShaderPasses(window.innerWidth, window.innerHeight, 2);

                var blurPass = new THREE.RenderPass(blurScene, camera);
                blurPass.clear = true;
                blurPass.clearAlpha = 0.0;

                var maskPass = new THREE.MaskPass(blurMaskScene, camera);
                var clearMaskPass = new THREE.ClearMaskPass();

                blurComposer.addPass(blurPass);
                blurComposer.addPass(maskPass);
                blurComposer.addPass(blur1Passes.horizontalPass);
                blurComposer.addPass(blur1Passes.verticalPass);
                blurComposer.addPass(blur2Passes.horizontalPass);
                blurComposer.addPass(blur2Passes.verticalPass);
                blurComposer.addPass(clearMaskPass);

                // Set up a simple shader that will overlay the blurred scene image over the regular scene image.
                var overlayShader = {
                    uniforms: {
                        tDiffuse: {
                            type: "t",
                            value: 0,
                            texture: null
                        }, // The base scene buffer
                        tOverlay: {
                            type: "t",
                            value: 1,
                            texture: null
                        } // The glow scene buffer
                    },

                    vertexShader: $('#simpleVertex').html(),
                    fragmentShader: $('#overlayFrag').html()
                };

                var scenePass = new THREE.RenderPass(scene, camera);
                scenePass.clear = true;

                overlayShader.uniforms["tOverlay"].value = blurComposer.renderTarget2;
                var overlayPass = new THREE.ShaderPass(overlayShader);
                overlayPass.renderToScreen = true;

                sceneComposer.addPass(scenePass);
                sceneComposer.addPass(overlayPass);
            }

            // This function simply creates a pair of THREE.ShaderPass objects (horizontal and vertical passes).
            // Since we are using the THREEJS composer object, the blur shader uniforms must be specifically named to fit into the THREEJS composer pipeline.
            // In a THREEJS composer, each pass takes in the result of the previous pass via a texture called 'tDiffuse'.
            var CreateBlurShaderPasses = function (h, v, blurriness) {
                var HBlurShader = {
                    uniforms: {
                        tDiffuse: {
                            type: "t",
                            value: null
                        },
                        h: {
                            type: "f",
                            value: blurriness / h
                        }
                    },
                    vertexShader: $('#simpleVertex').html(),
                    fragmentShader: $('#horizontalBlurFrag').html()
                };

                var VBlurShader = {
                    uniforms: {
                        tDiffuse: {
                            type: "t",
                            value: null
                        },
                        v: {
                            type: "f",
                            value: blurriness / v
                        }
                    },
                    vertexShader: $('#simpleVertex').html(),
                    fragmentShader: $('#verticalBlurFrag').html()
                };

                var HBlur = new THREE.ShaderPass(HBlurShader);
                var VBlur = new THREE.ShaderPass(VBlurShader);

                return {
                    horizontalPass: HBlur,
                    verticalPass: VBlur
                };
            }

            var RenderGlowScene = function () {
                //controls.update();

                var ticks = new Date().getTime() - startTime;

                // Update the 'time' value of the background shader to a scaled value based on the number of seconds that have elapsed.
                earthMaterial.uniforms.fTime.value = ticks / 70000.0;

                blurComposer.render();
                sceneComposer.render();
            }

            function animate() {
                requestAnimationFrame(animate);

                RenderGlowScene();
            }
        </script>
        <script>
            var mapLevel = 1;
            var forMap;
            function fans() {
                //renderer.clear();
                if (camera.position.z < 100) {
                    document.getElementById("glContainer").style.display = 'none';
                    document.getElementById("daohang").style.display = 'none';
                    document.getElementById('allmap').style.display = '';
                    maps();
                } else {
                    if (camera.position.x != 40) {
                        camera.position.z = camera.position.z - 1;
                        camera.position.x = camera.position.x - 1;
                        renderer.render(scene, camera); 
                    }
                    if (camera.position.x == 40) {
                        camera.position.z = camera.position.z - 1;
                        renderer.render(scene, camera);
                    }
                    requestAnimationFrame(fans);
                }
            }

            function maps() {
                var map = new BMap.Map("allmap", { mapType: BMAP_HYBRID_MAP });
                map.centerAndZoom(new BMap.Point(116.804817, 39.969095), 18);  // 初始化地图,设置中心点坐标和地图级别
                //添加地图类型控件
                map.addControl(new BMap.MapTypeControl({
                    mapTypes: [
                        BMAP_NORMAL_MAP,
                        BMAP_HYBRID_MAP
                    ]
                }));
                map.setCurrentCity("三河");          // 设置地图显示的城市 此项是必须设置的
                map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
            }

        </script>

</body>

</html>